<title>文章发布</title>
<style>

    .choosed, .tags {
        margin: 10px
    }

    .choosed + div {
        margin: auto;
        width: 250px;
        border-bottom: 1px solid rgba(2, 2, 2, .1)
    }


    .choose-tags span {
        display: inline-block;
        margin: 5px;
        padding: 3px;
        height: 30px;
        border-radius: 5px;
        cursor: pointer
    }

    .choose-tags span a {
        display: inline-block;
        margin: 3px
    }

    .choose-tags span:hover {
        opacity: .8
    }

    .choose-tag a {
        text-decoration: none
    }

    .tags-id, .choosetags > .choosed > span > span {
        display: none
    }
</style>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>文章管理</cite></a>
        <a><cite>文章发布</cite></a>
    </div>
</div>
<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/jw_admin.css?v={{ layui.admin.v }}-1" media="all">
</script>
<div class="layui-fluid layui-form" lay-filter="layuiadmin-form-comment">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md9 art-left">
            <div class="layui-card">
                <div class="layui-card-header">撰写新文章</div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <input autocomplete="off" class="layui-input" id="art-title" name="title" placeholder="键入标题"
                               type="text" lay-verify="required|maxLength" lay-max="100"
                               value="">
                    </div>
                    <div class="layui-form-item">
                        <input autocomplete="off" class="layui-input" id="art-author"
                               name="author" lay-verify="required|maxLength" lay-max="10"
                               placeholder="请输入作者"
                               type="text">
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body" id="article-content">
                    <script type="text/html" template lay-url="/api/admin/article/last/temp/info"
                            lay-data="{pageType: 10}" lay-type="post" lay-done="renderTemp(d)">
                        <input type="hidden" name="tempData" id="tempData" value="{{d.data && d.data.oid}}">
                        <textarea id="article-content-text" name="article"></textarea>
                    </script>
                </div>
            </div>

        </div>
        <div class="layui-col-md3 art-right-side">
            <div class="layui-card">
                <div class="layui-card-header">文章标签</div>
                <div class="layui-card-body">
                    <div class="choose-tags">
                        <div class="choosed">
                        </div>
                        <div class="separation-line"></div>
                        <div class="tags">
                            <script type="text/html" template lay-url="/api/admin/tag/list" id="JW_ARTICLE_PUBLISH_TAGS"
                                    lay-done="renderTags(d)">
                                <div lay-templateid="JW_ARTICLE_PUBLISH_TAGS" class="publish-tags">
                                    {{# layui.each(d.data, function(index, item){ }}
                                    <span class="publish-tags-content" data-id="{{ item.id }}"
                                          data-text="{{ item.name }}">{{ item.name}}</span>
                                    {{# }); }}
                                </div>

                            </script>

                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">文章分类</div>
                <div class="layui-card-body">
                    <div class="article-type">
                        <script type="text/html" template lay-url="/api/admin/menu/article/category/list">
                            <div class="layui-card layui-form" lay-filter="component-form-element" id="type-select">
                                <select lay-search lay-verify="required" name="categoryId" id="categoryId">
                                    <option style="font-weight: bold;color: black" value="-1"></option>
                                    {{# layui.each(d.data, function(index, item){ }}
                                    <optgroup label="{{ item.name }}"/>
                                        {{# layui.each(item.subCategoryList, function(subIdx, sub){ }}
                                        <option style="color: #777" value="{{ sub.id }}">{{ sub.name }}</option>
                                        {{# }); }}
                                    {{# }); }}


                                </select>
                            </div>
                        </script>
                    </div>

                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">缩略图</div>
                <div class="layui-card-body">
                    <div class="article-img">
                        <div class="layui-upload">
                            <button class="layui-btn" id="art-img" type="button">上传图片</button>
                            <div class="layui-upload-list imgupload">
                                <img class="pre-upd-img" id="breimg" style="margin-left: 5px" width="100">
                                <p id="demoText"></p>
                                <input id="imgsrc" name="imgsrc" style="visibility: hidden" value=""/>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">操作</div>
                <div class="layui-card-body">
                    <div class="published-btns-opt">
                        <div class="btns-opt">
                            <button class="layui-btn layui-btn-primary layui-btn-sm wd30p wdmin70"
                                    lay-filter="submit-article"
                                    lay-submit id="save-draft">保存草稿
                            </button>
                        </div>
                        <div class="separation-line"></div>
                        <a><i class="iconfont">&#xe606;</i> 公开度：<span id="published-public">公开</span></a>&nbsp;
                        <a id="edit">编辑</a>
                        <form class="layui-form" lay-filter="component-form-element" method="post">
                            <div class="layui-form-item" id="ispublic-form">
                                <div class="layui-input-block">
                                    <input checked class="ispublic-radio" id="public" lay-filter="public"
                                           name="isPublic" title="公开"
                                           type="radio" value="20">
                                    <span id="hometop1"><input id="hometop" lay-skin="primary" title="将文章置于首页顶端"
                                                               type="checkbox" name="hometop"
                                                               value="21"></span><br>
                                    <input class="ispublic-radio" id="passw" lay-filter="passw" name="isPublic"
                                           title="密码保护"
                                           type="radio"
                                           value="11">
                                    <input autocomplete="off" class="layui-input wd80p" id="passw-content"
                                           placeholder="密码"
                                           type="password">
                                    <input autocomplete="off" class="layui-input wd80p" id="passw-content-confirm"
                                           placeholder="确认密码"
                                           type="password"><br>
                                    <input class="ispublic-radio" id="secret" lay-filter="secret" name="isPublic"
                                           title="私密"
                                           type="radio" value="10">

                                </div>
                                <span id="pwd-tips" style="color: red;display: none"></span>
                                <div class="btns-opt" id="btns0" style="display: block">
                                    <button class="layui-btn layui-btn-sm" id="btn-ispublic-sure">确定</button>
                                    <button class="layui-btn layui-btn-primary layui-btn-sm" id="btn-ispublic-cancel">
                                        取消
                                    </button>
                                </div>
                            </div>
                            <div>
                                <div id="isComment">
                                    <input checked id="is-comment" name="isComment" title="是否可以评论" type="checkbox">
                                </div>
                            </div>
                            <div>
                                <div id="isOriginal">
                                    <input checked id="is-original" lay-filter="original" name="flagOriginal" title="是否原创" type="checkbox">
                                </div>
                                <div id="originalUrl" style="display: none">
                                    <input class="layui-input wd80p" id="original-url" lay-verify="urlFmt|maxLength" lay-max="100" placeholder="转载源链接" name="originalUrl" title="转载源链接" type="text">
                                </div>
                            </div>
                        </form>
                        <div class="separation-line"></div>
                        <script type="text/html" template lay-url="/api/admin/request/token/generate"
                                lay-data="{pageId: 'A11'}" lay-type="post" lay-done="doUpdateToken(d);">
                            <input type="hidden" name="subToken" id="subToken" value="{{d.token}}">
                        </script>

                        <div class="btn-group">
                            <div class="negative-btn">
                                <button class="layui-btn layui-btn-primary" id="cancel">重置</button>
                                <button class="layui-btn layui-btn-danger wd50p" lay-filter="submit-article" lay-submit
                                        id="remove-del">移至回收站
                                </button>
                            </div>
                            <div class="positive-btn">
                                <button class="layui-btn positive-btn-right wd50p" id="published-sure"
                                        lay-filter="submit-article" lay-submit>
                                    发布
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var timer;

    function renderTags() {
        layui.define(['element', 'form'], function (exports) {
            var form = layui.form
                , $ = layui.jquery
                , element = layui.element
            ;
            element.render()
            form.render()
            var tags = $('.choose-tags').find('.publish-tags-content');
            tags.each(function (i) {
                var color = Math.random();
                var r = parseInt((color * (i + 1) * 1234) % 254);
                var g = parseInt((color * (i + 1) * 4321) % 254);
                var b = parseInt((color * (i + 1) * 2222) % 254);
                $(this).css("background-color", "rgba(" + r + "," + g + "," + b + ",0.1)")
                $(this).css("border", "  1px rgba(" + r + "," + g + "," + b + ",1) solid")
            })

        });

    }


    function renderTemp(d)
    {
        layui.use('articlePublish', layui.factory('articlePublish')).use(['admin', 'articlePublish', 'form'], function () {
            var form = layui.form
                , $ = layui.jquery
                , element = layui.element
                , articlePublish = layui.articlePublish
                , admin = layui.admin
                , setter = layui.setter

            ;
            element.render()
            form.render()
            var isChange = false;
            var tempOid;

            var edit = articlePublish.getEdit(function () {
                isChange = true;
            }, function (opt, edit) {

            });

            $("input[name=title],input[name=author]").change(function () {
                isChange = true;

            })

            window.onunload = function () {
                saveTempArticle();
            }
            admin.on('refresh', function (router) {
                saveTempArticle();
            });

            admin.on('hash(article)', function (router) {

                if (admin.prevRouter && admin.prevRouter.href.startsWith('/article/published')) {
                    saveTempArticle();
                }

            });
            if (timer) {
                clearInterval(timer)
            }

            // console.log(d.data && d.data.oid)
            //每30秒保存一次
            timer = setInterval(function () {
                saveTempArticle();
            }, setter.saveArticleTime);

            if (d.data && d.data.oid) {
                alertAsk('系统存在之前未完成的临时文章，是否恢复?', function () {
                    var index = layer.load(0, {shade: false, offset: '400px'});
                    $('input[name=title]').val(d.data.title);
                    $('input[name=author]').val(d.data.author);
                    $('select[name=categoryId]').val(d.data.categoryId);
                    $('input[name=imgsrc]').val(d.data.imgSrc);
                    $('input[name=originalUrl]').val(d.data.originalUrl);
                    var publicStr = "公开"
                    if (d.data.accessType === "11") {
                        publicStr = "密码";
                    } else if (d.data.accessType === "10") {
                        publicStr = "私密";
                    }
                    if (d.data.topPlaceFlag) {
                        publicStr += "(置顶)";
                    }
                    $('#published-public').text(publicStr)
                    $('input[name=isPublic][value="' + d.data.accessType + '"]').attr("checked", true);
                    if (d.data.topPlaceFlag) {
                        // $('input[name=isPublic][value="20"]').attr("checked", true);
                        $('input[name=hometop]').attr("checked", true);
                    }
                    if (d.data.accessType === "11") {
                        $('#passw-content').val(d.data.password)
                        // $('#hometop1').hide();
                        $('#passw-content').show();
                        $('#passw-content-confirm').show();
                    }
                    $('#breimg').attr('src', d.data.imgSrc);
                    if (d.data.isComment) {
                        $('input[name=isComment]').attr("checked", true);
                    } else {
                        $('input[name=isComment]').removeAttr("checked");
                    }
                    if (d.data.flagOriginal) {
                        $('input[name=flagOriginal]').attr("checked", true);
                    } else {
                        $('input[name=flagOriginal]').removeAttr("checked");
                    }
                    form.render();
                    edit.setContent(d.data.content);
                    var tagsHtml = "";
                    if (d.data.artTagsList) {
                        layui.each(d.data.artTagsList, function (key, item) {
                            tagsHtml += '<span class="publish-tags-content" ' +
                                'data-id="' + item.id + '" data-text="' + item.name + '">' + (item.name) + '<a>×</a></span>';
                        })
                        $('.choosed').html(tagsHtml);
                        var tags = $('.choosed').find('.publish-tags-content');
                        tags.each(function (i) {
                            var color = Math.random();
                            var r = parseInt((color * (i + 1) * 1234) % 254);
                            var g = parseInt((color * (i + 1) * 4321) % 254);
                            var b = parseInt((color * (i + 1) * 2222) % 254);
                            $(this).css("background-color", "rgba(" + r + "," + g + "," + b + ",0.1)")
                            $(this).css("border", "  1px rgba(" + r + "," + g + "," + b + ",1) solid")
                        })
                    }
                    layer.close(index);

                }, function () {
                    ajaxPost('/api/admin/article/temp/update/void',
                        1,
                        JSON.stringify({
                            entityOid: d.data.oid
                        }));
                    d.data.oid = null;
                    tempOid = null;
                    $('#tempData').val(null);
                })

            }


            function saveTempArticle() {
                if (!isChange) return;
                var title = $('input[name=title]').val();
                var author = $('input[name=author]').val();
                var categoryId = $('select[name=categoryId]').val();
                var subToken = $('input[name=subToken]').val();
                var imgsrc = $('input[name=imgsrc]').val();
                var isPublic = $('input[name=isPublic]:checked').val();
                var originalUrl = $('input[name=originalUrl]').val();
                var articleContent = edit.getContent();
                var tagsId = [];
                var data = $('.choosed>span')
                for (let i = 0; i < data.length; i++) {
                    let o = {};
                    o.id = data.eq(i).data('id');
                    o.name = data.eq(i).data('text');
                    tagsId.push(o)
                }
                var publishTemp = isPublic;
                var passw = '';
                var topPlaceFlag = false;
                if ($('#hometop').prop('checked')) {
                    topPlaceFlag = true;
                }
                if (publishTemp === '11') {
                    passw = $('#passw-content').val();
                }
                var iscomment = 0;
                if ($('#is-comment').prop('checked')) {
                    iscomment = 1;
                }
                var flagOriginal = 0;
                if ($('#is-original').prop('checked')) {
                    flagOriginal = 1;

                }
                if (d.data && d.data.oid) {
                    tempOid = d.data.oid;
                }

                ajaxPost('/api/admin/article/temp/save',
                    1,
                    JSON.stringify({
                        requestId: subToken,
                        oid: tempOid,
                        title: title,
                        author: author,
                        articleContent: articleContent,
                        tags: tagsId,
                        categoryId: categoryId,
                        imgSrc: imgsrc,
                        accessType: publishTemp,
                        password: passw,
                        isComment: iscomment !== 0,
                        flagOriginal: flagOriginal !== 0,
                        topPlaceFlag: topPlaceFlag,
                        originalUrl: originalUrl,
                        pageType: "10"
                    }),
                null,
                function (res) {
                    if (!tempOid) {
                        tempOid = res.oid;
                        $('#tempData').val(tempOid);
                    }
                });
            }
        });


    }

    doUpdateToken = function (d) {
    }
</script>